<template>
  <div class="itemImage">
    <img style="object-fit: fill; height:600px;width:800px;" block :src="thisInfo.imageUrl"/>
    <h1 style="font-size:32px;">
      {{ thisInfo.message }}
    </h1>
  </div>
</template>

<script lang="ts">
// <script setup lang="ts">
import { Options, prop, Vue } from "vue-class-component";
import { defineComponent, PropType, reactive, ref, onMounted} from "vue";
export interface ItemImageInfo {
  message: string | undefined;
  imageUrl: string;
  name: string | undefined;
}
export default defineComponent({
  props: {
    info!: Object as PropType<ItemImageInfo>,
  },
  setup: (props, context) => {
      var pInfo = props.info;
      if (!pInfo) {
         pInfo = {
            message : "",
            imageUrl: "",
            name: ""
         }
      }
    var defaultData = {
        thisInfo: {
          message: pInfo.message,
          imageUrl: require("../assets/" + pInfo.imageUrl),
          name: pInfo.name,
        },
    };
   return defaultData;
  },
  requireImage(value: string): string {
    
    if (typeof value === "string") {
      if (value.indexOf("http") > 0) {
        return "" + value;
      } else {
        return "../assets/" + value;
      }
    }
    return "never.jpg";
  }
})
</script>
<style lang="less" scoped>
.itemImage {
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 20px;
  object-fit: fill;

  overflow: hidden;
  width: 1200px;
  background: #eee;

  border-radius: 30px;
  text-align: center;
}

</style>